<template>
  <div>
    <el-divider content-position="left">用户信息</el-divider>

    <el-table
      :data="dataList"
      border
      height="500"
    >
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="recordCurrentUser" label="当前用户" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.recordCurrentUser">{{scope.row.recordCurrentUser}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="password" label="密码" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>

      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.status==0">正常</el-tag>
          <el-tag type="warning" v-if="scope.row.status==2">审核中</el-tag>
          <el-tag type="danger" v-if="scope.row.status==1">冻结</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态变更" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status">
            <el-option :value="0" label="正常">正常</el-option>
            <el-option :value="1" label="冻结">冻结</el-option>
            <el-option :value="2" label="审核">审核</el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-check" type="success" circle
                     @click="updateUserStatus(scope.row)"></el-button>

          <el-button size="mini" type="danger" circle icon="el-icon-delete"
                     @click="removeUser(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getUserList, updateUser, removeUser} from '@/api/user'

  export default {
    name: "userInfo",
    data() {
      return {
        dataList: []
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        getUserList().then((r) => {
          this.dataList = r
        })
      },
      updateUserStatus(row) {
        updateUser({
          id: row.id,
          status: row.status
        }).then(() => {
          this.$message.success('修改成功');
          this.init()
        }).catch(() => {
          this.init()
        })
      },
      removeUser(id) {
        this.$confirm('删除 ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeUser(id).then(() => {
            this.init()
            this.$message.success('删除成功')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style scoped>

</style>
